<template>
  <div class="login-container">
    <video
      class="video"
      muted
      src="../../assets/video/bg-video.mp4"
      loop="loop"
      autoplay="true"
    ></video>
    <div class="bg2"></div>
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="login-loginForm"
    >

    <!-- 一开始是二维码角标,点击之后变成电脑角标,再次点击又切换 -->
			<i @click="(isErweiLogin = !isErweiLogin),(isSmsLogin = false)"
				:class="['jiaobiao', 'iconfont', jiaobiao]"></i>
			<!-- 切换二维码登入的控制条件isErweiLogin -->

    <!-- 常规登入 ----------------------->
    <h1 class="title" v-text="title"></h1>
    <div class="common-login" v-if="!isErweiLogin && !isSmsLogin">
            <!-- 用户名 -->
      <el-form-item label="用户名" prop="username">
        <el-input
          type="text"
          v-model="loginForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <!-- 验证码 -->
      <el-form-item label="验证码"
					prop="captcha">
					<el-input maxlength="5"
						v-model="loginForm.captcha"
						class="captcha"
						ref="captcha"
						@keydown.native.enter="submitForm('loginForm')"></el-input>
					<span class="captcha-svg"
						v-loading="loading">
						<i @click="updateCaptcha"
							v-html="captchaSvg"></i>
					</span>
				</el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')"
          >提交</el-button
        >
      </el-form-item>
      <!-- 切换短信登入按钮 -->
      <el-form-item>
					<div class="sms">
						<a href="javascript:;"
							style="color: #fff; font-size: 16px" @click="isSmsLogin=true">切换短信登入</a>
					</div>
				</el-form-item>
    </div>


    <!-- 二维码登入 ------------------------------------->
    <div class="erwei"
				v-else-if="isErweiLogin && !isSmsLogin">
				<div class="img"
             v-loading='qrLoading'
					>
					<img  :src="imgBase64Url"
						width="200px"
						alt="" />
					<i class="mask"
             v-show="showQrMask"
						 :style="qrStyle"
						 @click="getQrcode"
						> </i>
				</div>
				<p>
					<svg 
						class="icon-wx" >
						<use xlink:href="#icon-weixin"></use>
					</svg>
					<b v-text="qrTip"></b>
				</p>
			</div>



  <!-- 短信验证码登入 ------------------------------------>
  <div class="smsContainer" v-else>
     <el-form-item label="手机号">
        <el-input
          maxlength="11"
          v-model="phoneNumber"
          class="captcha phone"
        ></el-input>
        <span v-text="smsRetryMsg" @click="sendSmsCode" class="captcha-svg" style="lineheight:45px; text-decoration:underline"></span>
      </el-form-item>
      <el-form-item label="验证码"
					prop="captcha">
					<el-input 
          v-model="smsCode"
					></el-input>
			</el-form-item>
      <el-form-item>
        <el-button type="primary" @click="smsSubmit"
          >提交</el-button
        >
      </el-form-item>
  </div>


    </el-form>
  </div>
</template>
<script>
//引入api的方法 发送请求
import * as api from "@/api/users"

//引入扫码成功或者失效的图片
import scancodeSuccessPic from "../../assets/img/scancode.png"
import invalidPic from "../../assets/img/invalidQr.png"

//引入socket.io
import socketIo from "socket.io-client";
//引入生成二维码的插件qrcode
import qr from "qrcode"

//把store里映射到vuex
import {mapMutations} from 'vuex'


//验证码
var validateCaptcha = (rule, value, callback) => {
  if (value.length !== 5) {
    callback("验证码必须是5位");
  } else {
    callback();
  }
};

//用户名验证
var validateUsername = (rule, value, callback) => {
  var uPattern = /^[a-zA-Z0-9_-]{3,16}$/; //4到16位（字母，数字，下划线，减号）
  if (!uPattern.test(value)) {
    callback(new Error("4到16位（字母，数字，下划线，减号）"));
  } else {
    callback();
  }
};

//密码验证
var validatePassword = (rule, value, callback) => {
  if (value.length < 3) {
			callback("密码长度不能小于3位");
		} else {
			callback();
		}
};

export default {
  name: "login",
  data() {
    return {
      title:"千峰管理系统",
      qrTip: "请使用手机微信扫码登入", //切换到二维码登入时的提示文字
      smsRetryMsg:"点击发送验证码",  //文字提示：手机号发送验证码
      smsDisabled:false, //是否发送验证码
      phoneNumber:"",  //手机号
      smsCode:"",  //  填的验证码
      captchaSvg:'',//  验证码Svg
      imgBase64Url:"",   //生成二维码地址添加给src
      phoneNumber:"",//手机号
      smsCode:"",    //验证码
      loading:true,  //验证码刷新之前转圈圈
      isErweiLogin:false, //是否是二维码登入
      isSmsLogin:false,  //切换短信登入开关
      showQrMask:false, //二维码遮罩是否显示
      qrLoading:true,  //二维码loading开关
      loginForm: {//登入页面 输入框的工具
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
      qrStyle:{
         backgroundImage:`url(${invalidPic})`
      }
    };
  },
  mounted(){
    //调用获取验证码的方法
    this.updateCaptcha()
  },
  computed:{
    jiaobiao(){
      return this.isErweiLogin
					? "icon-diannaojiaobiao"
					: "icon-erweimajiaobiao";
    }
  },
  watch: {
    //监听切换短信登入逻辑
    isSmsLogin(val){
      //不是短信登录页面。清除定时器
      if(!val){
        if(this.smsInterval){
          //清除定时器
          clearInterval(this.smsInterval)
        }
        //恢复提示文字
        this.smsRetryMsg= "点击发送验证码"
      }
    },
      // 监听切换二维码登入的字段
      isErweiLogin(isErwei){
         if(isErwei){
          // 切换成了二维码登入
          //打开二维码加载动画
            this.qrLoading = true
          //关闭遮罩
          this.showQrMask = false
          let io =  socketIo("wss://chst.vip");//服务器是https协议，要使用wss
          
          //扫码成功--------------------
          io.on("scancodeSuccess",async (data)=>{
            this.showQrMask = true  //显示二维码遮罩
            //将二维码图片换成扫码成功的背景图片
            this.qrStyle.backgroundImage = `url(${scancodeSuccessPic})`; 
            //console.log(data);
            //先解构内容
            let {state:scanCodeState,wechatCode} = data
            if(scanCodeState){
              //扫码成功
              let scanCodeRes =  await api.wechatLogin(wechatCode)
              //console.log(scanCodeRes);
              //解构内容
              let {state,userInfo,permission:{buttons},token} = scanCodeRes.data
              //把token,userInfo,permission 存本地
              if(state){
                // localStorage.setItem('bb-userInfo',JSON.stringify(userInfo))
                localStorage.setItem('bb-permissionBtn',JSON.stringify(buttons))
                localStorage.setItem('bb-token',token)
                //调用vuex 的方法，设置用户信息
                //console.log(userInfo);
                this.SET_USERINFO(userInfo)
                //跳转到欢迎页
                this.$router.push('/')
                //关闭二维码遮罩
                this.showQrMask = false
              }
            }
          })

          //二维码失效------------------
          io.on("invalidCode",  data=>{
            console.log(data);
            let {state} = data
            if(!state){
              this.showQrMask=true
              //将提示文字变更
							this.qrTip = "二维码失效,请点击重新获取二维码";
            }
          })

          //连接成功--------------------
          io.on("connectSuccess",async (data)=>{
            //从data中解构sid
            let {sid} =data
            //console.log(sid);
            localStorage.setItem("bb-sid",sid)//唯一标识存本地
            //获取二维码 ,调用方法获取二维码地址
            this.getQrcode(sid)
          })
         }
      }
  },
  methods: {
   //映射vuex的mutation
		...mapMutations(["SET_USERINFO"]),

    //常规登入----------------
   async submitForm(formName) {
    //formName 就是表单的ref名字
      this.$refs[formName].validate((valid) => {
        if (valid) { //本地表单校验通过
          //打开加载动画loading
          const loading = this.$loading({
            lock: true,
            text: '正在登入...',
            spinner: 'el-icon-ice-tea',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          //解构拿到用户名  密码  验证码
          let {username,password,captcha}  = this.loginForm;

          //校验验证码
          api.verifyCaptcha(captcha)
          .then( async (res) =>{
            let {state} = res.data  //解构拿到state  状态
            if(state){  //验证码正确
              let loginRes = await api.login(username,password)
              let { state: loginState,msg,token,userInfo} = loginRes.data;
              
              if (loginState) {  
                //登入成功
                //关闭加载动画
                loading.close();
                //将token存储到localstorage
                localStorage.setItem("bb-token",token)
                //调用vuex 的方法，设置用户信息
                //console.log(userInfo);
                this.SET_USERINFO(userInfo)
                //  console.log(state);
                  //console.log(loginState);
                //跳转页面
                this.$router.push("/");
                //提示登入成功
                this.$message({
                  message:msg,
                  type:"success",
                  duration:1000
                })
              }else{
                //登入失败，关闭动画
                loading.close();
              }
            }else{
              //验证码失败关闭动画
              loading.close();
              //刷新验证码
              this.updateCaptcha()
            }
          })
        } else {
          //表单验证不通过
          
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //获取验证码方法--------------------
    updateCaptcha(){
      this.loading=true  //获取之前转圈圈开启
      api.getCaptcha()
      .then(res => {
        //console.log(res);
        let {img} = res.data  //解构验证码
        this.captchaSvg = img
        this.loading=false  //获取到转圈圈关闭
      })
    },

    //获取二维码地址方法-----------------
    async getQrcode(sid){
      //将提示文字变更
    this.qrTip ="请使用手机微信扫码登入"
      //关掉遮罩，打开loading动画
      this.showQrMask = false
      this.qrLoading = true
       
       //在双问号的左边如果是null，undefined时，就返回右边的值，如果没有就返回左边的值。
      sid = localStorage.getItem('bb-sid') ??sid

      let qrResult= await api.getQrcode(sid)
      //console.log(qrResult);
      let {scanCodeUrl,state:getQrstate} = qrResult.data
      //console.log(scanCodeUrl,state);
      //判断是否成功拿到
      if(getQrstate){
        //如果请求成功
        //使用qrcode插件，将scanCodeUrl变成一个二维码
        qr.toDataURL(scanCodeUrl,(err,imgBase64Url)=>{
          if(err) throw err
          //console.log(imgBase64Url)
          this.imgBase64Url = imgBase64Url
          //关掉二维码的加载loading
          this.qrLoading = false
          
        })
      }
    },

    //点击获取短信验证码-----------------
    async sendSmsCode(){
      //判断是否可以发送短信，通过smsDisabled来控制
     if (this.smsDisabled) {
					this.$message.error("1分钟内只能发送一次");
					return; //后面的逻辑不执行
				}

      let CodeResult= await api.getSmsCode(this.phoneNumber)
      console.log(CodeResult);
      //解构内容
      let {state} =CodeResult.data
      if(state){
        //锁住smsDisabled,不能在发送了
        this.smsDisabled=true

       //发送成功要给用户提示
      this.$message.success('短信发送成功')
      //短信发送需要进入倒计时
      this.smsSecond = 59
      this.smsInterval = setInterval(()=>{
        this.smsSecond--
        if(this.smsSecond<=0) {
          //清除定时器
          clearInterval(this.smsInterval)
          //文字复原
          this.smsRetryMsg= "点击发送验证码"
          //解开smsDisabled
        this.smsDisabled=false
          return
        }
        this.smsRetryMsg=`${this.smsSecond}秒后发送验证码`
      },1000)
      }
    },

    //短信验证码页面提交事件------------
    async smsSubmit(){
      //调用手机验证码登入方法
      let smsLoginRes = await api.smsLogin(this.smsCode)
      console.log(smsLoginRes);
      //解构
      let {state,token,permission:{buttons},userInfo} = smsLoginRes.data
      if(state){
        // localStorage.setItem('bb-userInfo',JSON.stringify(userInfo))
        localStorage.setItem('bb-permissionBtn',JSON.stringify(buttons))
        localStorage.setItem('bb-token',token)

        //调用vuex 的方法，设置用户信息
        //console.log(userInfo);
        this.SET_USERINFO(userInfo)
        //跳转到欢迎页
        this.$router.push('/')
    }
  },
  }
};
</script>

<style scoped lang="less">
//样式设置不上的情况,解决方案
//1.检查类名是否正确
//2.检查权重是否正确
//3.检查是否需要穿透
.icon-wx {
	width: 25px !important;
	height: 25px !important;
	vertical-align: -7px;
	margin-right: 3px;
}
.login-container {
	text-align: center;
	color: #fff;

	.common-login {
		padding-right: 50px;
	}

	//二维码样式
	.erwei .img {
		display: inline-block;
		position: relative;
		width: 200px;
		height: 200px;

		img {
			position: absolute;
			left: 0;
		}

		.mask {
			width: 100%;
			height: 100%;
			opacity: 0.8;
			background-color: #fff;
			position: absolute;
			left: 0;
			// background-image: url("../../assets/img/scancode.png");
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center;
			cursor: pointer;
		}
	}

	.jiaobiao {
		font-size: 60px;
		color: #fff;
		position: absolute;
		right: -1px;
		top: -1px;
		cursor: pointer;
		opacity: 0.7;
	}

	.video {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.bg2 {
		background-image: url("../../assets/img/bg2.png");
		background-repeat: no-repeat;
		position: fixed;
		width: 20%;
		height: 40%;
		background-size: 100% 100%;
		left: 20%;
		top: 40%;
		opacity: 0.5;
	}

	.el-form {
		position: fixed;
		right: 10%;
		top: 25%;
		border-radius: 5px;
		width: 400px;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 100px 0 50px 0;

		/deep/ .el-input__inner {
			width: 250px;
		}

		/deep/ .el-button--primary {
			background: linear-gradient(90deg, #1596fb, #002dff);
			width: 250px;
		}

		/deep/ .el-form-item__label {
			color: #fff;
		}

		.title {
			margin: 0 0 60px 0;
			text-align: center;
			color: #fff;
		}

		/deep/ .captcha {
			width: 100px;
			vertical-align: top;

			.el-input__inner {
				width: 100%;
				height: 45px;
				border-radius: 5px 0 0 5px;
				border: 0;
				font-size: 18px;
			}
		}

		svg path {
			stroke: red;
		}

		.captcha-svg {
      color: gray;
			background: #fff;
			display: inline-block;
			height: 45px;
			width: 150px;
			text-align: center;
			cursor: pointer;
			border: 0;
			border-radius: 0px 5px 5px 0;
		}

		.el-form-item__content {
			margin-left: 30px !important;
			width: 250px !important;
		}
	}
}

.sms {
	margin-left: -15px !important;
	width: 250px !important;
}

.smsContainer {
	padding-right: 20px !important;
	width: 89%;

	/deep/ .el-form-item__label {
		// margin-left: 80px !important
		padding: 0 !important;
		padding-right: 10px !important;
	}

	/deep/ .phone {
		width: 140px !important;
	}

	/deep/ .captcha-svg {
		width: 115px !important;
	}

	/deep/ .el-form-item__content {
		margin: 0;
	}
}


</style>